<template>
    <a-form :model="formState" v-bind="layout" name="nest-messages" :validate-messages="validateMessages"
        @finish="onFinish">
        <a-form-item :name="['user', 'name']" label="Name" :rules="[{ required: true }]">
            <a-input v-model:value="formState.user.name" />
        </a-form-item>
        <a-form-item :name="['user', 'email']" label="Email" :rules="[{ type: 'email' }]">
            <a-input v-model:value="formState.user.email" />
        </a-form-item>
        <a-form-item :name="['user', 'age']" label="Age" :rules="[{ type: 'number', min: 0, max: 99 }]">
            <a-input-number v-model:value="formState.user.age" />
        </a-form-item>
        <a-form-item :name="['user', 'website']" label="Website">
            <a-input v-model:value="formState.user.website" />
        </a-form-item>
        <a-form-item :name="['user', 'introduction']" label="Introduction">
            <a-textarea v-model:value="formState.user.introduction" />
        </a-form-item>
        <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
            <a-button type="primary" html-type="submit">Submit</a-button>
        </a-form-item>
    </a-form>
</template>
<script setup>
import { reactive, createVNode } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};
const formState = reactive({
    user: {
        name: 'YoYoYo',
        age: 18,
        email: 'YoYoYo@gmail.com',
        website: 'iHRM',
        introduction: 'Can eat, drink and sleep',
    },
});
const onFinish = values => {
    console.log('Success:', values);
    Modal.success({
        title: 'Your information',
        icon: createVNode(ExclamationCircleOutlined),
        content: JSON.stringify(values.user),
        onOk() {
            message.info('关闭弹窗')
        },
    });
};

</script>